<div class="module-market">
    <div class="layout-market">

        <div class="layout-md" ref="layoutMiddle">


            <div class="col-left">
                <div class="module-box">
                    <!-- 选项卡头 -->
                    <div class="m-tab chart-tab" :class="{'chart-tab--hide':chartType === 'superkline'}">
                        <ul class="list fn-clearfix">
                            <li class="item">
                                <a class="item-link" id="tab-superkline"
                                    :class="{'item-link--active': chartType === 'superkline'}" href="javascript:;"
                                    @click="setChartType('superkline')">{{$t('candlestick')}}</a>
                            </li>
                            <li class="item">
                                <a class="item-link " id="tab-timeshare"
                                    :class="{'item-link--active': chartType === 'timeshare'}" href="javascript:;"
                                    @click="setChartType('timeshare')">{{$t('priceChart')}}</a>
                            </li>
                            <li class="item">
                                <a class="item-link " id="tab-depth"
                                    :class="{'item-link--active': chartType === 'depth'}" href="javascript:;"
                                    @click="setChartType('depth')">{{$t('depthChart')}}</a>
                            </li>
                        </ul>
                    </div>

                    <!-- chart K线图 -->
                    <div class="box-content chart-box">
                        <div class="kline-container  chart-info">
                            <div class="charts">
                                <super-kline v-if="chartType=='superkline' && hasReadyShowSuperKline === true"
                                    :height="height" :symbol="$$symbol"></super-kline>
                                <time-share v-if="chartType=='timeshare'" lang="en" :wsSymbol="$$symbol"
                                    :height="height"></time-share>
                                <!--<simple-kline v-if="chartType=='simplekline'"  lang="en" :wsSymbol="$$symbol" :height="height"></simple-kline>-->
                                <depth v-if="chartType=='depth'" lang="en" :wsSymbol="$$symbol" :height="height">
                                </depth>
                            </div>
                        </div>
                    </div>
                </div>
            </div>






            <!-- 买、卖挂单  成交记录 -->
            <div class="col-right">
                <!-- 买、卖挂单 -->
                <div class="col-right-half">
                    <buy-sell-pan :ws-symbol="$$symbol" :height="height"></buy-sell-pan>
                </div>
                <!-- 成交记录 -->
                <div class="col-right-half">
                    <live-trade :ws-symbol="$$symbol" :height="height"></live-trade>
                    <!--<trade-info :ws-symbol="$$symbol" :height="height"></trade-info>-->
                </div>
            </div>
        </div>





        <!-- 下半部分 -->
        <div class="layout-ft">
            <div class="form-drop" v-if="hasLogin===false">
                <!--<a href="javascript:;" @click="gologin" class="text">{{ $t('common.signIn') }}</a>-->
                <i18n path="trade.gotoLogin" tag="div" class="text">
                    <a place="action" href="javascript:;" @click="gologin">{{ $t('common.signIn') }}</a>
                </i18n>
            </div>


            <!-- 挂单记录 -->
            <div class="col-left">
                <div class="left-title">
                    <div class="m-tab">
                        <ul class="list fn-clearfix">
                            <li class="item">
                                <a class="item-link" :class="{'item-link--active': orderType === ORDER_CURRENT}"
                                    @click="setOrderType(ORDER_CURRENT)">{{$t('openOrders')}}</a>
                            </li>
                            <li class="item">
                                <a class="item-link" :class="{'item-link--active': orderType === ORDER_HISTORY}"
                                    @click="setOrderType(ORDER_HISTORY)">{{$t('tradeHistory')}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <my-current-order v-if="orderType === ORDER_CURRENT"></my-current-order>
                <my-history-order v-if="orderType === ORDER_HISTORY"></my-history-order>
            </div>



            <!-- 限价   行情价   -->
            <div class="col-right">
                <ul class="ul-price fn-clearfix">
                    <li class="li-price" :class="{'price-active': priceType}" @click="changePrice1()">
                        交易
                    </li>
                    <li v-if="acount" class="li-price" :class="{'price-active': !priceType}" @click="changePrice2()">
                        解锁
                    </li>
                </ul>

                <div class="market-form" v-show="priceType">
                    <!-- 买入 -->
                    <div class="form-box">
                        <div class="title">
                            <div class="title-balance">
                                <span class="text">{{$$symbol.split('_')[0]}} {{$t('trade.balance')}}</span>
                                <em class="strong">{{currencyBalance}}</em>
                            </div>
                            <div class="title-text">{{$t('trade.buy')}} {{coinText}}</div>
                        </div>
                        <validator :rules="buyRules">
                            <form action="javascript:;" name="buyForm" class="form">

                                <div class="col-row">
                                    <div class="col-label">
                                        <label>{{$t('trade.price')}}</label>
                                    </div>
                                    <div class="col-value">
                                        <input type="text" name="price" id="buyPrice"
                                            v-number="{model: 'buyForm.price', precision: $$coinPrecision}"
                                            v-model="buyForm.price" class="input fn-block input--padding"
                                            autocomplete="off" tabindex="1">
                                        <div class="ui-tip"></div>
                                    </div>
                                    <div class="placeholder placeholder-buy">{{$$symbol.split('_')[0]}}</div>
                                    <div class="set-price">
                                        <a href="javascript:;" class="price price-up" @click="setBuyPriceUp()">
                                            <i class="icon icon-arrow-up"></i>
                                        </a>
                                        <a href="javascript:;" class="price price-down" @click="setBuyPriceDown()">
                                            <i class="icon icon-arrow-down"></i>
                                        </a>
                                    </div>
                                </div>


                                <div class="col-row">
                                    <div class="col-label">
                                        <label>{{$t('trade.amount')}}</label>
                                    </div>
                                    <div class="col-value">
                                        <input type="text" name="amount" id="buyAmount"
                                            v-number="{model: 'buyForm.amount', precision: $$amountPrecision}"
                                            v-model="buyForm.amount" class="input fn-block" autocomplete="off"
                                            tabindex="2">

                                        <div class="ui-tip"></div>
                                    </div>
                                </div>


                                <div class="col-row">
                                    <div class="col-label">
                                        <label>{{$t('trade.total')}}</label>
                                    </div>
                                    <div class="col-text">{{buyTotal}} {{$$symbol.split('_')[0]}} </div>
                                </div>


                                <div class="do">
                                    <button type="submit"
                                        v-if="symbolStatus === 'LISTED' || symbolStatus === 'PRELISTED'" @click="buy()"
                                        class="ui-btn ui-btn--block btn-buy">{{$t('trade.buy')}}</button>
                                    <button type="submit" v-else disabled
                                        class="ui-btn ui-btn--block btn-buy btn-sell--disable">{{$t('trade.buy')}}</button>
                                </div>
                            </form>
                        </validator>
                    </div>
                    <!-- 卖出 -->
                    <div class="form-box">
                        <div class="title">
                            <div class="title-balance">
                                <span class="text">{{coinText}} {{$t('trade.balance')}} </span>
                                <em class="strong">{{coinBalance}}</em>
                            </div>
                            <div class="title-text">{{$t('trade.sell')}} {{coinText}}</div>
                        </div>
                        <validator :rules="sellRules">
                            <form action="javascript:;" name="sellForm" class="form">
                                <div class="col-row">
                                    <div class="col-label">
                                        <label>{{$t('trade.price')}}</label>
                                    </div>
                                    <div class="col-value">
                                        <input type="text" name="price"
                                            v-number="{model: 'sellForm.price', precision: $$coinPrecision}"
                                            v-model="sellForm.price" id="sellPrice"
                                            class="input fn-block input--padding" autocomplete="off" tabindex="3">
                                        <div class="ui-tip"></div>
                                    </div>
                                    <div class="placeholder placeholder-buy">{{$$symbol.split('_')[0]}}</div>
                                    <div class="set-price">
                                        <a href="javascript:;" class="price price-up" @click="setSellPriceUp()">
                                            <i class="icon icon-arrow-up"></i>
                                        </a>
                                        <a href="javascript:;" class="price price-down" @click="setSellPriceDown()">
                                            <i class="icon icon-arrow-down"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-row">
                                    <div class="col-label">
                                        <label>{{$t('trade.amount')}}</label>
                                    </div>
                                    <div class="col-value">
                                        <input type="text" name="amount"
                                            v-number="{model: 'sellForm.amount', precision: $$amountPrecision}"
                                            v-model="sellForm.amount" id="sellAmount" class="input fn-block"
                                            autocomplete="off" tabindex="4">
                                        <div class="ui-tip"></div>
                                    </div>
                                </div>
                                <div class="col-row">
                                    <div class="col-label">
                                        <label>{{$t('trade.total')}}</label>
                                    </div>
                                    <div class="col-text">{{sellTotal}} {{$$symbol.split('_')[0]}}</div>
                                </div>
                                <div class="do">
                                    <button type="submit"
                                        v-if="symbolStatus === 'LISTED' || symbolStatus === 'PRELISTED'" @click="sell()"
                                        class="ui-btn ui-btn--block btn-sell">{{$t('trade.sell')}}</button>
                                    <button type="submit" v-else disabled
                                        class="ui-btn ui-btn--block btn-sell btn-sell--disable">{{$t('trade.sell')}}</button>
                                </div>
                            </form>
                        </validator>
                    </div>
                </div>
                <div class="market-form" v-show="!priceType">
                    <!-- 解锁交易 -->
                    <div class="form-box">
                        <form action="javascript:;" name="buyForm" class="form">
                            <div class="b-unlock">
                                <div class="one">
                                    <div class="ll1">{{$t('unrech')}}</div>
                                    <div class="ll2">{{lockingDetail1}}</div>
                                </div>
                                <div class="two">{{coinText}}</div>
                            </div>
                        </form>
                    </div>
                    <!-- 模式说明 -->
                    <div class="form-box">
                        <div class="tom-num">
                            <span class="left">昨日持仓解锁数量 {{lockingDetail2}}</span>
                            <span class="right">{{coinText}}</span>
                        </div>
                        <div class="tom-num">
                            <span class="left">累计持仓解锁数量 {{lockingDetail3}}</span>
                            <span class="right">{{coinText}}</span>
                        </div>
                        <div class="tom-num">
                            <span class="left">昨日奖励解锁数量 {{lockingDetail4}}</span>
                            <span class="right">{{coinText}}</span>
                        </div>
                        <div class="tom-num">
                            <span class="left">累计奖励解锁数量 {{lockingDetail5}}</span>
                            <span class="right">{{coinText}}</span>
                        </div>
                    </div>
                </div>
            </div>





        </div>
    </div>

    <pay-dialog-buy v-if="isShowPayDialogBuy === true" :req-param="buyForm" :on-success="onBuySuccess"
        v-on:hide="hidePayDialogBuy"></pay-dialog-buy>
    <pay-dialog-sell v-if="isShowPayDialogSell === true" :req-param="sellForm" :on-success="onSellSuccess"
        v-on:hide="hidePayDialogSell"></pay-dialog-sell>
    <set-pay-pwd v-if="isShowSetPayPwd === true" v-on:hide="hidSetPayPwd" :on-binding-success="onSetPayPwdSuccess">
    </set-pay-pwd>
    <pay-pwd v-if="isShowPayPwd === true" v-on:hide="hidePayPwd" :on-binding-success="onPayPwdSuccess">
    </pay-pwd>
    <fund-tip v-if="isShowFundTip" v-on:hide="isShowFundTip = false" :tipType="fundTipType"></fund-tip>

</div>